<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="change-box flexWrapNo" :style="{top:customHeight.top+'px',height:customHeight.height+'px'}" @tap="goPage('/pages/index/myStore')">
					切换门店
					<image src="../../static/index/change-icon.png" class="change-icon"></image>
				</view>
				<view class="shop-box" :style="{paddingTop:navHeight+'px'}">
					<swiper class="banner-box"  :autoplay="true"  :interval="3000" :duration="1000">
						<swiper-item class="banner-item" v-for="(item, index) in bannerList" :key="index" @tap="previewImage(item,bannerList)">
							<view class="shop-img">
								<image :src="item" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="shop-info">
						<view class="info-top">
							<view class="shop-name-box flexWrapNo">
								<view class="shop-name">{{storeInfo.shop_name}}</view>
								<view class="shop-status" :class="{'repair-status':storeInfo.store_status_data!='business'}">
									<block v-if="storeInfo.store_status_data=='business'">营业中</block>
									<block v-else-if="storeInfo.store_status_data=='rest'">休息中</block>
									<block v-else>维护中</block>
								</view>
							</view>
						</view>
						<view class="address-info">
							<text>{{storeInfo.location}}</text>
						</view>
					</view>
				</view>
				<view class="operation-box flexWrapNo">
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/index/shopInfo')">
						<view class="operation-img">
							<image src="../../static/index/shop-icon.png"></image>
						</view>
						<view>店铺信息</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/index/tableManage')">
						<view class="operation-img">
							<image src="../../static/index/table-icon.png"></image>
						</view>
						<view>桌台管理</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/index/operatingData')">
						<view class="operation-img">
							<image src="../../static/index/operating-icon.png"></image>
						</view>
						<view>营业报表</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/index/memberData')">
						<view class="operation-img">
							<image src="../../static/index/member-icon.png"></image>
						</view>
						<view>会员报表</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/index/orderList')">
						<view class="operation-img">
							<image src="../../static/index/order-icon.png"></image>
						</view>
						<view>订单明细</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/couponList')">
						<view class="operation-img">
							<image src="../../static/index/coupon-icon.png"></image>
						</view>
						<view>优惠券</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/memberSearch')">
						<view class="operation-img">
							<image src="../../static/index/membermanage-icon.png"></image>
						</view>
						<view>会员管理</view>
					</view>
					<!-- <view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/control')">
						<view class="operation-img">
							<image src="../../static/index/control-icon.png"></image>
						</view>
						<view>设备控制</view>
					</view> -->
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/calculationRecords')">
						<view class="operation-img">
							<image src="../../static/index/settlement-icon.png"></image>
						</view>
						<view>结算记录</view>
					</view>
					<!-- <view class="operation-item flexWarpCenterColumn">
						<view class="operation-img">
							<image src="../../static/index/monitor.png"></image>
						</view>
						<view>监控</view>
					</view>
					<view class="operation-item flexWarpCenterColumn">
						<view class="operation-img">
							<image src="../../static/index/conditioner-icon.png"></image>
						</view>
						<view>空调</view>
					</view> -->
					<!-- <view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/openDoor')">
						<view class="operation-img">
							<image src="../../static/index/openDoor-icon.png"></image>
						</view>
						<view>开门</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/cleanManage')">
						<view class="operation-img">
							<image src="../../static/index/clean-icon.png"></image>
						</view>
						<view>保洁管理</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/tableList')">
						<view class="operation-img">
							<image src="../../static/index/payLater-icon.png"></image>
						</view>
						<view>先打后付</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/taskList')">
						<view class="operation-img">
							<image src="../../static/index/task-icon.png"></image>
						</view>
						<view>任务挑战</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/passCard')">
						<view class="operation-img">
							<image src="../../static/index/passCard-icon.png"></image>
						</view>
						<view>通卡优惠</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/appointmentManagement')">
						<view class="operation-img">
							<image src="../../static/index/appointment-icon.png"></image>
						</view>
						<view>约球管理</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/manage/plannedList')">
						<view class="operation-img">
							<image src="../../static/index/appointment-icon.png"></image>
						</view>
						<view>扣费明细</view>
					</view> -->
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				pageOpc:0,
				customHeight:{
					height:30,
					top:20
				},
				navigationBarHeight:"",
				navHeight:"",
				iStatusBarHeight:"",
				storeInfo:{},
				bannerList:[]
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			//胶囊高度
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			this.customHeight = wx.getMenuButtonBoundingClientRect()
			 // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = this.customHeight.height + (this.customHeight.top - this.iStatusBarHeight) * 2
			// 总体高度 = 状态栏高度 + 导航栏高度
			this.navHeight = this.navigationBarHeight + this.iStatusBarHeight
			//#endif
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onShow() {
			this.getStoreInfo();
		},
		methods:{
			getStoreInfo(){
				this.$request.post(this.$api.storeInfo, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.storeInfo=data
						this.bannerList=data.shop_cover_images.split(',')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 28upx;
	}
	.banner-box{
		height: 304upx;
		.banner-item{
			height: 304upx;
			border-radius:16upx;
			overflow: hidden;
			.shop-img{
				height: 100%;
			}
		}
	}
	.shop-box{
		.shop-info{
			margin-top: 28upx;
			.info-top{
				.shop-name-box{
					.shop-name{
						font-size: 36upx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 50upx;
						color: #333333;
					}
					.shop-status{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						width: 108upx;
						height: 44upx;
						line-height: 44upx;
						text-align: center;
						background: #50AB6E;
						border-radius: 36upx;
						margin-left: 24upx;
					}
					.repair-status{
						background:#B7B7B7;
					}
				}
			}
			.address-info{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34upx;
				color: #6E6E6E;
				margin-top: 14upx;
			}
		}
	}
	.operation-box{
		margin-top: 54upx;
		flex-wrap: wrap;
		.operation-item{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #6E6E6E;
			margin-right: 40upx;
			margin-bottom: 56upx;
			&:nth-of-type(4n){
				margin-right: 0;
			}
			.operation-img{
				width: 140upx;
				height: 140upx;
				margin-bottom: 16upx;
			}
		}
	}
</style>
